$color: #ff5300;

@mixin box__shadow{
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.nav__outer{
  height: 64px;
}
.nav{
  height: 64px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 12px 20px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;
  @include box__shadow;

  .hor__logo{
    height: 40px;

    &:hover{
      filter: opacity(90%);
      opacity: 0.9;
    }
  }

  .nav__ul{
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;

    li{
      height: 40px;
      line-height: 40px;
      margin-left: 20px;
      cursor: pointer;
      a{
        color: rgba(0, 0, 0, 0.65);
      }
      &:hover{
        a{
          color: $color;
          font-weight: bold;
        }
      }
    }
  }

  .nav__ul_wr{
    text-align: right;
  }

  .nav__ul_icon{
    font-size: 40px;
    color: $color;
    &:hover, &:active{
      filter: opacity(90%);
      opacity: 0.9;
      color: #000;
    }
  }


  %hor__bar{
    display: block;
    width: 100%;
    height: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: $color;
  }
  @mixin ver($r:0deg, $y:-50%){
    top: 50%;
    -webkit-transform: translateY($y) rotate($r);
    -moz-transform: translateY($y) rotate($r);
    -ms-transform: translateY($y) rotate($r);
    -o-transform: translateY($y) rotate($r);
    transform: translateY($y) rotate($r);
  }
  .span_icon{
    display: inline-block;
    width: 26px;
    height: 20px;
    position: relative;
    margin-top: -10px;

    .span_icon__inner, &:before, &:after{
      position: absolute;
      left: 0;
      right: 0;
    }
    .span_icon__inner{
      @extend %hor__bar;
      @include ver;
    }
    &:before, &:after{
      -webkit-transition: 200ms ;
      -moz-transition: 200ms ;
      -ms-transition: 200ms ;
      -o-transition: 200ms ;
      transition: 200ms ;
    }
    &:before{
      content: ' ';
      @extend %hor__bar;
      top: 0;
    }
    &:after{
      content: ' ';
      @extend %hor__bar;
      bottom: 0;
    }
    &:hover, &:active{
      .span_icon__inner{
        background-color: rgba(0,0,0,0);
        background-color: transparent;
      }
      &:before{
        @include ver(45deg);
        opacity: 0.5;
        filter: alpha(opacify=50);
      }
      &:after{
        @include ver(135deg);
        opacity: 0.5;
        filter: alpha(opacify=50);
      }
    }
  }
}

:global {
  .ant-drawer-body{
    padding: 0;
    padding-top: 40px;
    .drawer__item{
      color: $color;
      margin: 0;
      line-height: 3;
      text-indent: 2em;
      a{
        color: rgba(0, 0, 0, 0.65);
        display: block;
      }
      &:hover, &:active{
        font-weight: bold;
        background-color: $color;
        background-image: linear-gradient(45deg, #ff1200, #ffb100);
        color: #ffffff;
        a{
          color: #ffffff;
        }
      }
    }
  }
}
